<template>
  <div class="list" id="list_1" v-if="total" list>
    <ul>
      <li class="width-100" v-for="(item, index) in articleList" :key="index">
        <a v-if="item.imgUrl" href="javascript: voie(0)" @click="$router.push('/articleDetails/'+item.viewPointId)" class="images" :title="item.title"><img :src="item.imgUrl"></a>
        <div class="info" :class="{'fr': item.imgUrl}">
          <a href="javascript:void(0)" @click="$router.push('/articleDetails/'+item.viewPointId)" class="title ftz18">{{item.title}}</a>
          <a href="javascript:void(0)" class="txt">{{item.summary}}</a>
          <div class="txt-tip">
            <span>{{ item.updateTime | parseTime('{y}-{m}-{d}')}}</span>
            <span class="line"></span>
            <span>阅读量：{{item.hot}}</span>
            <span class="line"></span>
            <span :title="item.classifyName">分类：{{item.classifyName}}</span>
          </div>
        </div>
      </li>
    </ul>
    <!-- page -->
    <laypage :pageSize.sync="searchData.pageSize" :total="total" :pageNum.sync="searchData.pageNum" @changePage="getArticleByStatus"></laypage>
    <!-- page end -->
  </div>

</template>
<script>
// import $ from 'jquery'
import NavBar from '@/components/nav-bar'
import Footer from '@/components/footer'
import Laypage from '@/components/laypage'
import { mapState } from 'vuex'
// import CryptoJS from 'crypto-js'
import * as api from '@/service/api'
// import cookie from '@/utils/cookie'
export default {
  components: {
    NavBar,
    Footer,
    Laypage
  },
  data () {
    return {
      viewData: {
        certOrgs: {}
      },
      total: null,
      searchData: {
        pageSize: 10,
        pageNum: 1,
        status: '0'
      },
      articleList: [],
      loading: false
    }
  },
  created () {
    this.getCertInfo()
  },
  mounted () {
    setTimeout(() => {
      this.getArticleByStatus()
    }, 1000)
  },
  computed: {
    // 来源网址
    url () {
      return this.$route.query.url || ''
    },
    curId () {
      return this.$route.params.id
    },
    userId () {
      return this.$store.state.me.sysUser.userId
    },
    curRoute () {
      return this.$route.path
    },
    ...mapState({
      me: state => state.me
    })
  },
  methods: {
    changeClassfy (key) {
      this.searchData.status = key
      this.getArticleByStatus()
    },
    modifyUserFocusEvent () {
      let eventName = this.viewData.focusStatus === '0' ? '取消关注' : '关注'
      if (!this.userId) {
        window.layui.layer.msg('请登录后再' + eventName + '！')
        return false
      }
      let that = this
      window.layer.open({
        type: 1,
        offset: 'auto',
        id: 'layerDemo' + 'auto', // 防止重复弹出
        content: '<div style="padding: 20px 100px;">确认' + eventName + '吗</div>',
        btn: '确认',
        // closeBtn: 1,
        btnAlign: 'c',
        shade: 0,
        yes: function () {
          that.modifyUserFocus()
          if (window.layer) {
            window.layer.closeAll()
          }
        }
      })
    },
    async modifyUserFocus () {
      await api.modifyUserFocus({
        focusUserId: this.viewData.authType === '1' ? this.viewData.certExpert.userId : this.viewData.certOrgs.userId,
        focusStatus: this.viewData.focusStatus === '0' ? '1' : '0'
      })
      this.getCertInfo()
    },
    async getCertInfo () {
      let res = await api.getCertInfo({ userId: this.curId })
      this.viewData = res.data
      this.$nextTick(() => {
        if (window.layer) {
          window.layer.close(this.layerLoad)
        }
      })
    },
    async getArticleByStatus (page) {
      if (page) {
        this.searchData.pageNum = page
      }
      this.articleList = []
      let res = await api.getArticleByStatus({ ...this.searchData, userId: this.curId })
      this.articleList = res.data.data.list
      this.total = res.data.data.total
      this.$nextTick(() => {
        if (window.layer) {
          window.layer.close(this.layerLoad)
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import "../../style/res/investment";
.userInfo {
  min-height: 500px;
}
</style>
